<template>
  <div class="patient">
    <div class="card">
      <div class="align-items_center">
        <van-image
          class="avatar mr_sm"
          round
          width="3rem"
          height="3rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />

        <div class="flex">
          <div class="justify_between align-items_center">
            <p class="name">简一</p>
          </div>
          <div class="justify_between align-items_center">
            <p class="card-num">620423198812121212</p>
          </div>
        </div>
        <div></div>
      </div>
      <hr class="mt_sm" />
      <div class="align-items_center justify_between mt_sm">
        <span class="card-num">24岁</span>
        <span class="card-num">男</span>

        <span class="card-num">藏族</span>
      </div>
    </div>

    <div class="card mt_xs">
      <p class="card-num">
        <span class="label">归属地区：</span><span>年龙乡</span>
      </p>
      <div class="card-num mt_xs justify_between align-items_center">
        <p><span class="label">筛查次数：</span><span>1次</span></p>
      </div>
      <p class="card-num mt_xs">
        <span class="label">人群分类：</span><span>非重点人群</span>
      </p>

      <div class="card-num mt_xs justify_between align-items_center">
        <p><span class="label">筛查日期：</span><span>2023-11-14</span></p>

        <div class="align-items_center">
          <van-button
            plain
            class="btn_small"
            type="primary"
            size="mini"
            round
            @click="navigate('/modules/diagnose/src/result_editor')"
            >提交诊断结果</van-button
          >
        </div>
      </div>
      <p class="card-num mt_xs">
        <span class="label">筛查单位：</span><span>色达县年龙乡信息采集组</span>
      </p>
    </div>
    <div class="patient-footer mt_sm">
      <van-button
        block
        size="small"
        class="btn px_sm"
      >
        新增筛查
      </van-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { navigate } from '@/service/navigate';

export default defineComponent({
  setup() {
    return {
      navigate,
    };
  },
});
</script>